<script setup lang="ts">
	import type { IPlantItem } from '@/simba/types/index';

	const props = defineProps<{
		list: IPlantItem[]
	}>()
	// console.log(props)
	function onAllCheckedHandler(){
		console.log('SimbaPlantList--- onAllCheckedHandler')
	}
	
</script>

<template>
	<view class="spl-content">
		<view class="content_head">
			<up-checkbox :customStyle="{marginBottom: '8px'}"
				label="全选"
				name="agree"
				usedAlone
				@change="onAllCheckedHandler"></up-checkbox>
			<view style="padding: 20rpx;">
				<slot name="BatchOp"></slot>
			</view>
			
		</view>
		<view v-for="(item, index) in list" :key="index" style="display: flex; flex-direction: column;">
			<view class="content-item">
				<up-checkbox-group>
					<up-checkbox :checked="item.checked" shape="circle"></up-checkbox>
				</up-checkbox-group>
				<view class="detail">
					<up-image :show-loading="true" :src="item.url" radius= 10 width="100rpx" height="100rpx"></up-image>
					<view class="detail-de">
						<view>{{item.name}}</view>
						<view class="temp-humi">
							<view>温度：{{item.temprature}}℃</view><view>湿度：{{item.humidity}}%</view>
						</view>
					</view>
				</view>
				<view class="item-op">
					<slot name="ItemOpOne" :obj="item"></slot>
					<view class="devi"></view>
					<slot name="ItemOpTwo" :obj="item"></slot>
				</view>
			</view>
			<up-divider :hairline="true"></up-divider>
		</view>
	</view>
</template>

<style lang="scss">
	.spl-content{
		width: 100%;
		height: auto;
		// border: 1rpx greenyellow solid;
		display: flex;
		flex-direction: column;
		.content_head{
			width: 100%;
			display: flex; 
			flex-direction: row; 
			justify-content: space-between;
			// border: 1rpx red solid;
		}
		.content-item{
			height: 100%; 
			display: flex; 
			flex-direction: row; 
			align-items: center; 
			margin: 20rpx 10rpx 20rpx 10rpx;
			.detail{
				width: 100%; 
				display: flex;
				flex-direction: row; 
				align-items:center;
				.detail-de{
					width: 100%;
					.temp-humi{
						width: 80%; 
						display: flex; 
						flex-direction: row; 
						justify-content: space-between;
					}
				}
			}
			.item-op{
				height: 100%; 
				display: flex; 
				flex-direction: column; 
				justify-content: space-between;
				.devi{
					height: 10rpx;
				}
			}
		}
	}
</style>
